<style type="text/css">
.main_content{
background-color: skyblue;
text-align: center;
}

.main_content top{}
.main_content imgzone{}
.main_content wordlist{}
.option_element{
  cursor:pointer;
}
.selected_font{
  color:#000000;

}
.unselected_font{
  color:#DCDCDC
}
.sentence_area{
  width:99%;/*自动适应父布局宽度*/  
  overflow:auto;  
  word-break:break-all; 
}
</style>



<div id="main_content" class="main_content">
    <div id="top">
        <div id="selectLanguage">
            <span id="en" name="languageType">EN</span>
            <span>|</span>
            <span id="jp" name="languageType">JP</span>
        </div>
        <div id="sentenceArea">
            <form id="sentenceForm">
                {% csrf_token %}
                <textarea id="sentence" name="sentence" rows="5"></textarea>
            </form>
        </div>
        <div id="submitButton">
            <button id="submitB">parse</button>
        </div>
    </div>
    <div id="imgZone">
        <img id="imgStructure" src="../static/img/2021-04-29 005818 4.jpg" alt="img loading..."/>
    </div>
    <div id="wordList">
        <p>word</p>
    </div>
</div>

<script type="text/javascript">
window.onload=function(){//do something cursor:pointer
  elements = document.getElementsByName("languageType");
  for(i=0;i<elements.length;i++){
      elements[i].setAttribute("onclick","switchLanguage(this)");
      elements[i].setAttribute("class","option_element unselected_font");
  }
  document.getElementById("en").setAttribute("class","option_element selected_font");
  document.getElementById("submitB").setAttribute("onclick","submitB()");
  document.getElementById("sentence").setAttribute("class","sentence_area");
}
function switchLanguage(obj){
//遍历同类元素集合 将当前元素设置为选中状态 其他元素置为未选中状态
    this_obj_id = obj.getAttribute("id");
    this_obj_name = obj.getAttribute("name");
    elements = document.getElementsByName(this_obj_name);
    for(i=0;i<elements.length;i++){
        if(elements[i].getAttribute("id")==this_obj_id){
            document.getElementById(elements[i].getAttribute("id")).setAttribute("class","option_element selected_font");
        }else{
            document.getElementById(elements[i].getAttribute("id")).setAttribute("class","option_element unselected_font");
        }
    }

}
function submitB(){
    var elements = document.getElementsByName("languageType");
    var languageType;
    for(i=0;i<elements.length;i++){
        if(elements[i].getAttribute("class")=="option_element selected_font"){
            languageType = elements[i].getAttribute("id");break;
        }
    }
    console.log("languageType:"+languageType);
    $.ajax({
        headers:{"X-CSRFToken":$.cookie("csrftoken")},
        type: 'POST',
        url: "/fanyi/"+languageType+"/",
        data: $('#sentenceForm').serialize(),
        success: function(message){
            console.log(message);
            $("#imgStructure").attr("src",message.src);
            $("#sentence").val(message.detail);
        },
      dataType: "json"
    });
}
</script>
<script src="../static/js/jquery-3.6.0.min.js" type="text/javascript"></script>
<script src="../static/js/jquery.cookie.js" type="text/javascript"></script>
